<template>
    <div>
      <h2 style="text-align: center;">城市时区信息列表</h2>
      <el-row :gutter="20">
  <el-col :span="14" :offset="8" style="display: flex; flex-direction: column;">
    <!-- 添加/批量删除按钮 -->
    <div>
      <el-button @click="toSelectCity" type="primary" size="small">查询城市</el-button>
      <el-button type="text" icon="el-icon-refresh" :style="{ fontSize: '24px', padding: '10px' }" @click="refreshBtn"></el-button>
    </div>
    <el-table
      :data="cityList"
      style="width: 100%; max-width: 1200px; margin-top: 20px;"
      @selection-change="handleSelectionChange"
      
    >
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="city"
        label="城市"
        width="100">
      </el-table-column>
      <el-table-column
        prop="timezoneId"
        label="时区"
        width="200">
      </el-table-column>
      
    </el-table>
    <el-row style="margin-top: 10px">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        prev-text="上一页"
        next-text="下一页"
        @next-click="getCityPage(pageNo + 1, pageSize)"
        @prev-click="getCityPage(pageNo - 1, pageSize)"
        @current-change="handleCurrentChange"
        v-if="isPaginationVisable"
      ></el-pagination>
    </el-row>
  </el-col>
</el-row>
      <!-- 添加城市Dialog -->
  <el-dialog title="添加城市" :visible.sync="dialogTableVisible" width="%40" @close="resetForm('cityForm')">
        <el-form :model="timezone" :rules="rules" ref="cityForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="城市名" prop="city">
    <el-input v-model="timezone.city" placeholder="请输入城市名"></el-input>
  </el-form-item>
  <el-form-item label="所属时区" prop="timezoneId">
    <el-select v-model="timezone.timezoneId" placeholder="请选择所属时区">
    <el-option label="东八区" value="+08:00"></el-option>
    <el-option label="东九区" value="+09:00"></el-option>
    <el-option label="东十区" value="+10:00"></el-option>
    <el-option label="东七区" value="+07:00"></el-option>
    <el-option label="东六区" value="+06:00"></el-option>
    <el-option label="东五区" value="+05:00"></el-option>
    <el-option label="东四区" value="+04:00"></el-option>
    <el-option label="东三区" value="+03:00"></el-option>
    <el-option label="东二区" value="+02:00"></el-option>
    <el-option label="东一区" value="+01:00"></el-option>
    <el-option label="格林威治标准时间" value="+00:00"></el-option>
    <el-option label="西一区" value="-01:00"></el-option>
    <el-option label="西二区" value="-02:00"></el-option>
    <el-option label="西三区" value="-03:00"></el-option>
    <el-option label="西四区" value="-04:00"></el-option>
    <el-option label="西五区" value="-05:00"></el-option>
    <el-option label="西六区" value="-06:00"></el-option>
    <el-option label="西七区" value="-07:00"></el-option>
    <el-option label="西八区" value="-08:00"></el-option>
    <el-option label="西九区" value="-09:00"></el-option>
    <el-option label="西十区" value="-10:00"></el-option>
</el-select>
</el-form-item>
  <el-form-item>
    <el-button type="primary" @click=" addCityBtn('cityForm')">添加</el-button>
    <el-button @click="resetForm('cityForm')">重置</el-button>
  </el-form-item>
</el-form>
      </el-dialog>
      <!-- 更新Dialog -->
      <el-dialog title="更新城市" :visible.sync="dialogTableVisibleUpdate" width="%40" @close="resetForm('cityForm')">
        <el-form :model="timezone" :rules="rules" ref="cityForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="城市Id" prop="cityId">
    <el-input v-model="timezone.cityId" disabled></el-input>
  </el-form-item>        
  <el-form-item label="城市名" prop="city">
    <el-input v-model="timezone.city" placeholder="请输入城市名"></el-input>
  </el-form-item>
  <el-form-item label="所属时区" prop="timezoneId">
    <el-select v-model="timezone.timezoneId" placeholder="请选择所属时区">
    <el-option label="东八区" value="+08:00"></el-option>
    <el-option label="东九区" value="+09:00"></el-option>
    <el-option label="东十区" value="+10:00"></el-option>
    <el-option label="东七区" value="+07:00"></el-option>
    <el-option label="东六区" value="+06:00"></el-option>
    <el-option label="东五区" value="+05:00"></el-option>
    <el-option label="东四区" value="+04:00"></el-option>
    <el-option label="东三区" value="+03:00"></el-option>
    <el-option label="东二区" value="+02:00"></el-option>
    <el-option label="东一区" value="+01:00"></el-option>
    <el-option label="格林威治标准时间" value="+00:00"></el-option>
    <el-option label="西一区" value="-01:00"></el-option>
    <el-option label="西二区" value="-02:00"></el-option>
    <el-option label="西三区" value="-03:00"></el-option>
    <el-option label="西四区" value="-04:00"></el-option>
    <el-option label="西五区" value="-05:00"></el-option>
    <el-option label="西六区" value="-06:00"></el-option>
    <el-option label="西七区" value="-07:00"></el-option>
    <el-option label="西八区" value="-08:00"></el-option>
    <el-option label="西九区" value="-09:00"></el-option>
    <el-option label="西十区" value="-10:00"></el-option>
</el-select>
</el-form-item>
  <el-form-item>
    <el-button type="primary" @click=" updateCityBtn">更新</el-button>
    <el-button @click="dialogTableVisibleUpdate=false">取消</el-button>
  </el-form-item>
</el-form>
      </el-dialog>
      <!-- 查询航班Dialog -->
      <el-dialog title="查询城市" :visible.sync="dialogTableVisibleSelect" width="%40" @close="resetForm('cityForm')">
        <el-form :model="timezone"  ref="cityForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="城市名" prop="city">
    <el-input v-model="timezone.city" placeholder="请输入城市名"></el-input>
  </el-form-item>
  <el-form-item label="所属时区" prop="timezoneId">
    <el-select v-model="timezone.timezoneId" placeholder="请选择所属时区">
    <el-option label="东八区" value="+08:00"></el-option>
    <el-option label="东九区" value="+09:00"></el-option>
    <el-option label="东十区" value="+10:00"></el-option>
    <el-option label="东七区" value="+07:00"></el-option>
    <el-option label="东六区" value="+06:00"></el-option>
    <el-option label="东五区" value="+05:00"></el-option>
    <el-option label="东四区" value="+04:00"></el-option>
    <el-option label="东三区" value="+03:00"></el-option>
    <el-option label="东二区" value="+02:00"></el-option>
    <el-option label="东一区" value="+01:00"></el-option>
    <el-option label="格林威治标准时间" value="+00:00"></el-option>
    <el-option label="西一区" value="-01:00"></el-option>
    <el-option label="西二区" value="-02:00"></el-option>
    <el-option label="西三区" value="-03:00"></el-option>
    <el-option label="西四区" value="-04:00"></el-option>
    <el-option label="西五区" value="-05:00"></el-option>
    <el-option label="西六区" value="-06:00"></el-option>
    <el-option label="西七区" value="-07:00"></el-option>
    <el-option label="西八区" value="-08:00"></el-option>
    <el-option label="西九区" value="-09:00"></el-option>
    <el-option label="西十区" value="-10:00"></el-option>
</el-select>
</el-form-item>
  <el-form-item>
    <el-button type="primary" @click=" selectCityBtn('cityForm')">查询</el-button>
    <el-button @click="resetForm('cityForm')">重置</el-button>
  </el-form-item>
</el-form>
      </el-dialog>
    </div>
</template>
  <script>
  import axios from 'axios';
  import { mapGetters } from 'vuex';
    export default {
      computed: {
    ...mapGetters([
      'name',
      'userId'
    ])
    },
    created() {
    // 在组件创建时，将 userId 的值赋给 data 中的 localUserId
    this.localUserId = this.userId
  },
      data() {
        return {
          localUserId:'',
          cityList:[],
          pageNo:1,
          pageSize:8,
          total:0,
          cityIds:[],
          dialogTableVisible:false,
          dialogTableVisibleSelect:false,
          isPaginationVisable:true,
          timezone:{
            cityId:undefined,
            city:'',
            timezoneId:''
          },
          rules:{
            city:[
            { required: true, message: '请输入城市名', trigger: 'blur' },
            ],
            timezoneId:[
            { required: true, message: '请选择时区', trigger: 'blur' },
            ],
          },
          dialogTableVisibleUpdate:false
        }
      },
      mounted(){
        this.getCityPage(this.pageNo,this.pageSize);
      },
      methods:{
        /**
         * 刷新按钮事件
         */
         refreshBtn(){
          this.getCityPage(this.pageNo,this.pageSize);
          this.isPaginationVisable=true
         },
        /**
         * 多选事件处理
         */
        handleSelectionChange(val){
          this.cityIds=[],
          val.forEach(element => {
            this.cityIds.push(element.cityId)
          });
          
        },
        /**
         * 批量删除
         */
        batchDeleteCity(){
          if(this.cityIds&&this.cityIds.length===0){
            this.$message({
            type: 'error',
            message: '请选择要删除的数据!'
          })
          }else{
          this.$confirm('是否批量删除', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
          }).then(() => {
          //确定删除
          axios.post("http://localhost:8082/timezone/batchDeleteCity",JSON.stringify(this.cityIds),{
            headers:{
              'Content-Type':'application/json'
            }
          }).then(resp=>{
            if(resp.data.code===0){
              this.$message({
            type: 'success',
            message: '删除成功'
          });
          this.getCityPage(this.pageNo,this.pageSize)
            }else{
              this.$message({
              type: 'error',
              message: resp.data.message
          })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '已取消删除'
          });          
        });}
        },
        /**
         * 处理当前页
         */
        handleCurrentChange(current){
          this.pageNo=current
          this.getCityPage(this.pageNo,this.pageSize)
        },
        /**
         * 分页获取乘客信息的函数
         */
        getCityPage(pageNo,pageSize){
          this.pageNo=pageNo
          this.pageSize=pageSize
          axios.get("http://localhost:8082/timezone/getCityPage",{
            params:{
              pageNo:this.pageNo,
              pageSize:this.pageSize,
            }
          }).then(resp=>{
            console.log("------->",resp)
            this.cityList=resp.data.data.page
            this.total=resp.data.data.total
          })
        },
        /**
         * 删除乘客
         */
        deleteCity(cityId){
          console.log(cityId)
          // 跳出删除确认和取消弹出框
           this.$confirm('是否删除', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.get("http://localhost:8082/timezone/deleteCity",{
            params:{
              cityId:cityId
            }
          }).then(resp=>{
            console.log(resp)
            if(resp.data.code==0){
              this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getCityPage(this.pageNo,this.pageSize)
          }else {
              this.$message({
                type: 'error',
                message: resp.data.message
              });
            }
          });
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '已取消删除'
          });          
        });
        },
        /**
         * 表单重置
         */
         resetForm(cityForm){
          //只能重置成flight对象的数据
          this.$refs[cityForm].resetFields();
          this.timezone=this.$options.data().timezone
         },
          /**
          * 添加乘客
          */
          addCityBtn(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
            console.log(this.timezone);
            axios.post(`http://localhost:8082/timezone/addCity`, this.timezone, {
    headers: {
        'Content-Type': 'application/json'
    }
}).then(resp => {
    console.log(resp);
    if (resp.data.code === 0) {
        // 关闭对话框
        this.dialogTableVisible = false;
        // 获取分页数据
        this.getCityPage(this.pageNo, this.pageSize);
    } else {
        this.$message.error(resp.data.data.message);
    }
}).catch(error => {
    this.$message.error("请求失败");
    console.error(error);
});
        } else {
            this.$message.error("添加乘客失败");
            return false;
        }
    });
},
         /**
          * 查询按钮
          */
          selectCityBtn() {
            console.log('Current city:', this.timezone);
            axios.get("http://localhost:8082/timezone/getCityList", {
            params: {
              pageNo: this.pageNo,
              pageSize:1000,
              city:this.timezone.city,
              timezoneId:this.timezone.timezoneId
            }
          }).then(resp => {
            if(resp.data.code===0){
                //关闭对话框
                this.dialogTableVisibleSelect=false
                this.isPaginationVisable=false
                this.cityList = resp.data.data;
                
              }else{
                this.$message.error(resp.data.message)}
                this.cityList = resp.data.data;
             
          });
        },

         /**
          * 查询显示页面
          */
         toSelectCity(){
          this.dialogTableVisibleSelect=true
         },
         /**
          * 添加页面表单重置
          */
         toAddCity(){
          this.dialogTableVisible=true
         },
         /**
          * 弹出更新航班页面
          */
         toEditCity(row){
          this.dialogTableVisibleUpdate=true
          console.log(row)
          this.timezone.cityId=row.cityId,
          this.timezone.city=row.city,
          this.timezone.timezoneId=row.timezoneId
         },
         /**
          * 更新按钮
          */
          updateCityBtn(){
            console.log("this timezone",this.timezone)
            axios.post("http://localhost:8082/timezone/updateCity",JSON.stringify(this.timezone),{
              headers:{
              'Content-Type':'application/json'
            }
            }).then(resp=>{
              console.log(resp)
              if(resp.data.code===0){
                //关闭对话框
                this.dialogTableVisibleUpdate=false
                //获取分页数据
                this.getCityPage(this.pageNo,this.pageSize)
              }else{
                this.$message.error(resp.data.data.message)
              }
            }
            )
          }
      }
    }
  </script>
  <style>


</style>